<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Color Blocks - App Inventor for Android
    </title>
    <link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="/static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="/static/css/appinventor.css" rel="stylesheet">
    <script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
    <script>
  var tracker = new gweb.analytics.AutoTrack({
        profile: 'UA-5856106-2'
      });
    </script>
    <link href="test.css" rel="stylesheet">
    <style>
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="/about/"><img alt="" src="/static/images/appinventor_logo.gif"></a>
          </div>
          <form action="http://www.google.com/cse" id="cse-search-box">
            <input name="cx" type="hidden" value="011848991959401852367:xnrcbhk2zus"> <input name=
            "ie" type="hidden" value="UTF-8">
            <div class="header-search">
              <div class="header-search-query">
                <input class="textbox" name="q" type="text">
              </div>
              <div class="header-search-button">
                <input name="sa" src="/static/images/search-button.png" type="image">
              </div>
            </div>
          </form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
         >
</script>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="/about/">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="/learn/">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="/forum/">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="http://appinventor.googlelabs.com/ode/Ya.html" target="_blank">My
              Projects</a>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="/learn/">Learn</a> &gt; <a href="/learn/reference/">Reference</a> &gt; Color
            Blocks &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Color Blocks
              </h1>
              <p>
                The Blocks Editor Colors drawer contains several blocks corresponding to commonly
                used colors. You can plug these into the sockets for blocks that require colors,
                such as setting the text color or the background color of a component. These same
                colors can also be selected from the color dropdown lists in the Designer's
                Properties panel.
              </p>
              <h3>
                Making your own colors
              </h3>
              <p>
                Colors in App Inventor are encoded as numbers, as you can see if you print a color
                block. For example, the color blue is the large negative number −16776961. If you
                know the secret to encoding colors, you don't need to be restricted to App
                Inventor's built-in colors. You can put any color at all into your apps.
              </p>
              <p>
                Colors are created using four numbers, each running from 0 through 255. The first
                three numbers signify the amount of red, green, and blue in the color. You can find
                color charts on the Web that give the <em>R</em>, <em>G</em>, <em>B</em>
                specifications for may colors, or you can experiment with your own <em>R</em>,
                <em>G</em>, <em>B</em> mixtures. The fourth number specifies <em>opacity</em> which
                comes into play when regions overlap. Opacity 255 is fully opaque: the color will
                completely block out anything under it. Opacity 0 is fully transparent: you won't
                even see the color on the screen. Intermediate values determine how much the
                underlying screen will show though.
              </p>
              <p>
                To get a color number for App Inventor, combine the four numbers according to the
                following algorithm:
              </p>
              <ol>
                <li>Start with the opacity.
                </li>
                <li>Multiply this by 256 and add <em>R</em>.
                </li>
                <li>Multiply the result by 256 and add <em>G</em>.
                </li>
                <li>Multiply the result by 256 and add <em>B</em>.
                </li>
                <li>Take the result and subtract 16<sup>8</sup> = 4294967296
                </li>
                <li>The resulting (negative) number is what you use for App Inventor.
                </li>
              </ol>
              <p>
                As an example, the <em>R</em>, <em>G</em>, <em>B</em> values for a deep shade of
                purple are <em>R</em> = 160, <em>G</em> = 32, <em>B</em> = 240. Applying the
                algorithm to these values, with an opacity of 255, gives −6283024. If you set the
                background color of a canvas to −6283024, you'll see a purple patch on the screen.
              </p>
              <p>
                <a href="colorchart.html">Here is a chart</a> that gives the numbers for a variety
                of colors.
              </p>
              <p>
                And here's a blocks program that computes the color number given <em>R</em>,
                <em>G</em>, and <em>B</em>. The opacity is fixed ar 255, but you can change that by
                changing the global variable.
              </p>
              <div class="imagecontainer">
                <img alt="" src="images/colorNumber.png" width="735">
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt=
              "Creative Commons License" class="c2" src=
              "http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/"
              rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              ©2011 Google<br>
              <a href="/about/index.html">About</a> | <a href="/about/privacy.html">Privacy</a> |
              <a href="/about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script>
  if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>